<template>
  <div class="search">
    <div class="search-header g-inline">
      <el-input
        placeholder="请输入群号 / 群名称 / 关键字"
        v-model="option"
        @keyup.enter.native="handleGroupSearch">
      </el-input>
      <el-button class="search-btn" type="primary" @click="handleGroupSearch">
        查找
      </el-button>
    </div>
    <div class="search-result">
      <div
        v-for="(group, index) in results"
        :key="index"
        class="result-item">
        <div class="result-card">
          <img
            class="avatar"
            :src="defaultAvatar(group)"/>
          <div class="info">
            <div class="name">
              {{defaultGroupName(group)}}
            </div>
            <div class="number">
              <i class="el-icon-s-custom"></i>
              {{defaultNumber(group)}}
              {{defalutCreatorName(group)}}
            </div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              :disabled="isDisable(group)"
              @click="handleApplyAddGroupClick(group)">
              申请
            </el-button>
          </div>
        </div>
        <div class="intro">{{defaultIntroduction(group)}}</div>
      </div>
    </div>
    <form-dialog title="添加群" :visible.sync="applyAddGroupFormVisible" :appendToBody="true">
      <add-group-form
        :group="currentGroup"
        @cancel="handleAddGroupCancel"
        @submit="handleAddGroupSubmit"/>
    </form-dialog>
  </div>
</template>

<script>
import AddGroupForm from './AddGroupForm'
export default {
  name: 'SearchFriendForm',
  components: {
    AddGroupForm
  },
  props: {
    organizationId: {
      required: false
    }
  },
  data () {
    return {
      applyAddGroupFormVisible: false,
      option: '',
      results: [],
      currentGroup: null
    }
  },
  methods: {
    defaultAvatar (group) {
      if (group && group.groupAvatar) {
        return group.groupAvatar
      } else {
        return this.$const.DEFAULT_PICTURE
      }
    },
    /**
     * 默认群名
     */
    defaultGroupName (group) {
      if (group) {
        if (group.groupName) {
          return group.groupName
        } else {
          return '未命名'
        }
      } else {
        return '未命名'
      }
    },
    /**
     * 默认人数
     */
    defaultNumber (group) {
      if (group && group.groupCurrentCount && group.groupMaxCount) {
        return `${group.groupCurrentCount}/${group.groupMaxCount}`
      } else {
        return '0/0'
      }
    },
    /**
     * 默认群介绍
     */
    defaultIntroduction (group) {
      if (group && group.groupIntroduction) {
        return group.groupIntroduction
      } else {
        return '暂无群介绍'
      }
    },
    /**
     * 默认群主
     */
    defalutCreatorName (group) {
      if (group && group.groupCreatorName) {
        return group.groupCreatorName
      } else {
        return '无效群组'
      }
    },
    isDisable (group) {
      return group.groupCreatorName == null
    },
    /**
     * 搜索群
     */
    handleGroupSearch () {
      this.$request.contact.groupSearch(
        this.option,
        res => {
          this.results = res.data
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    /**
     * 申请添加群
     */
    handleApplyAddGroupClick (group) {
      this.currentGroup = group
      this.applyAddGroupFormVisible = true
    },
    handleAddGroupCancel () {
      this.applyAddGroupFormVisible = false
    },
    handleAddGroupSubmit () {
      this.applyAddGroupFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  .search-header {
    .search-btn {
      margin-left: 10px;
      width: 180px;
    }
  }
  .search-result::-webkit-scrollbar {
    display: none;
  }
  .search-result {
    margin-top: 20px;
    height: 420px;
    overflow: auto;
    .result-item {
      width: 300px;
      margin-bottom: 20px;
      box-sizing: border-box;
      float: left;
      .result-card {
        margin: auto;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .avatar {
          width: 80px;
          height: 80px;
          margin-right: 10px;
        }
        .info {
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          .name {
            font-size: 18px;
            font-weight: bold;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .number {
            display: flex;
            align-items: center;
          }
        }
      }
      .intro {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
